<!-- 直播页 -->
<template>
  <div id="livePage">
    <div class="videos" :class="{ 'horizontal-screen': mode_button }" id="videoPlayer"></div>
    <!-- bottom: this.fun.getPhoneEnv() == 1 ? '2.875rem' : '0', -->
    <div
      class="replyMainComment set-pc-style"
      v-show="show && mainCommentShow"
      :style="{
        position: this.fun.getPhoneEnv() == 1 ? 'absolute' : 'fixed'
      }"
    >
      <div class="left">
        <input type="text" ref="commentInput" v-model="maincomment" @blur="isBlur" placeholder="和主播说点什么" />
      </div>
      <div class="right" @click="sendmessage" :style="{ backgroundColor: isSuccessIM ? '#ee0223' : '#999999' }">
        发送
      </div>
    </div>

    <swiper :options="swiperOption" v-if="liveList.length > 0 && !swiperResize" ref="mySwiper">
      <swiper-slide v-for="(item, index) in liveList" :key="index">
        <div class="content add_bgc" v-show="!item.show">
          <img :src="item.banner" alt="" class="coverImg" />
          <img class="play" :src="require('@/assets/images/play1.png')" alt="" v-if="loadedVideoDataOk" @click.stop="noAutoPlaying" />
        </div>
        <div class="content add_bgc stop_style" v-if="stopLive">
          <img :src="item.banner" alt="" class="coverImg" />
          <div class="stop_showbox">
            <img v-if="item.avatar" :src="item.avatar" alt="" class="stop_cover" />
            <p class="stop_text">{{ stopLiveTest }}</p>
          </div>
        </div>
        <div class="content" v-show="item.show">
          <div
            class="top"
            :style="{
              top: fun.getPhoneEnv() == 2 ? (isPlaying ? '2.625rem' : '0.25rem') : '0.25rem'
            }"
          >
            <div class="backBtn" @click.stop="gotoLivelist">
              <i class="iconfont icon-back"></i>
            </div>
            <div class="anchorInfo">
              <div class="Avatar">
                <img :src="$store.state.temp.mailInfo&&$store.state.temp.mailInfo.logo" alt="" />
              </div>
              <div class="user">
                <p style="font-size:12px;">{{ dataInfo.nickname }}</p>
                <p style="font-size:10px;">
                  <template v-if="false">{{ dataInfo.address }}| </template
                  ><template >{{ view_num }} 观看</template>
                </p>
              </div>
            </div>
          </div>

          <div
            class="positionStyles"
            :style="{
              bottom: fun.getPhoneEnv() == 2 ? (isPlaying ? '0.875rem' : '2rem') : '2.125rem'
            }"
          >
            <div class="BarrageBox" v-if="item.show">
              <canvas id="Barragecanvas" width="375" height="86"></canvas>
            </div>
            <!-- 购买，关注，进入直播间 的提示框 -->
            <div class="purchase_tips">
              <div :style="{ opacity: tipsopacity }" class="purchase_tips_content">
                <div class="buyingBox">
                  <i class="iconfont icon-htmal5icon29" v-if="tipsContentMsssage.type == 'buy'"></i>
                  <template v-if="tipsContentMsssage.type == 'buy'">
                    <em class="buyName">{{ tipsContentMsssage.nickname }}</em
                    >等{{ tipsContentMsssage.count }}人正在去买
                  </template>
                  <template v-if="tipsContentMsssage.type == 'come'">
                    <em class="buyName">{{ tipsContentMsssage.nickname }}</em
                    >正在进入直播间
                  </template>
                  <template v-if="tipsContentMsssage.type == 'concern'">
                    <em class="buyName">{{ tipsContentMsssage.nickname }}</em
                    >正在关注主播
                  </template>
                </div>
              </div>
            </div>

            <div style="display: flex; justify-content: space-between; position: relative;">
              <div class="comment" @touchmove.stop>
                <ul class="chat_messages" id="chat_messages" @touchmove.stop>
                  <li class="chat_messages_child" v-for="(item, index) in messageList" :key="index" @click.stop>
                    <div class="text">
                      <template v-if="!fun.isTextEmpty(item.text)">
                        <div class="chat_image">
                          <img :src="item.memberAvatar" alt="" />
                        </div>
                        <em class="name">{{ item.nickName }}</em
                        >{{ item.text }}
                      </template>
                      <template v-if="fun.isTextEmpty(item.text)">
                        {{ item.content }}
                      </template>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="top_icon">
                <!-- <div class="top_icons"  @click="shareMessage" style="margin-bottom: 0.625rem;">
                  <i class="iconfont icon-zb_all_share"></i>
                </div> -->
                <div class="top_icons" @click="getPoster" style="margin-bottom: 0.625rem;">
                  <i class="iconfont icon-zb_all_haibao"></i>
                </div>
              </div>

              <div class="plugin_main" @touchmove.stop v-if="!fun.isTextEmpty(diy_menu)">
                <div class="plugin_child" @touchmove.stop v-for="(item, index) in diy_menu" :key="index" v-show="(!isMiniprogram && item.url) || (isMiniprogram && item.mini_url)">
                  <img :src="item.thumb_src" alt="" @click.stop="toSetURL(item)" />
                  <i class="iconfont icon-adsystem_icon_cancle" @click.stop="cloneFloatBtn(index)"></i>
                </div>
              </div>
            </div>
            <!-- 进度条 开始 -->
            <div class="audio-wrapper" v-if="dataInfo.status == 2">
              <span class="icon" @click.stop="changePlayStatus">
                <img :src="require('@/assets/images/play1.png')" alt="" v-show="songStop" />
                <img :src="require('@/assets/images/stop1.png')" alt="" v-show="!songStop" />
              </span>
              <div class="slider" ref="slider" @touchstart="handleTouchStart">
                <div class="slider-track"></div>
                <div class="slider-fill" :style="'width:' + sliderTime + '%'"></div>
                <div class="slider-thumb" :style="'left:' + sliderTime + '%'"></div>
              </div>
              <div class="time">
                <div class="time_left">
                  {{ targetVideo.currentTime | formatSecond }}
                </div>
                <div class="time_right">
                  {{ targetVideo.maxTime | formatSecond }}
                </div>
              </div>
            </div>
            <!--进度条 end -->
            <div class="bottomBox" style="z-index: 99;">
              <div style="display: flex;">
                <div class="top_icons top_icons1" @click="showGoodLift = true">
                  <i class="iconfont icon-zb_goods"></i>
                  <div class="num" v-if="dataInfo.goods_num">
                    {{ dataInfo.goods_num }}
                  </div>
                </div>
                <div class="commentLeft" @click="subMainCommentBtn">
                  {{ commentMessage }}
                </div>
              </div>
              <div class="bottomRight">
                <div class="canvasBox" v-if="item.show">
                  <canvas id="likeid" width="100" height="150"></canvas>
                </div>

                <div class="btn_main" >
                  <div class="top_icons journal-reward" @click="addClickLove">
                    <i class="iconfont icon-zb_all_like" :style="{ color: isAddLove ? '#fc7d26' : '#fff' }"></i>
                    <div class="num likenum" v-if="dataInfo.like_count">
                      {{ dataInfo.like_count }}
                    </div>
                  </div>
                  <p>点赞</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>

    <div style="display: none;">
      <img id="canvasImg" :src="require('@/assets/images/dianzan@2x.png')" alt="" class="zb_gift" />
    </div>

    <van-overlay :show="showPoster" @click="showPoster = false" />
    <div class="popupClass_newPoster" @touchmove.stop v-if="!fun.isTextEmpty(dataInfo)" :style="{ left: showPoster ? '50%' : '-150%' }">
      <div class="popup-box" v-show="loadingImg">
        <div class="code" id="code_box">
          <div class="shop_top">
            <!-- <img :src="base64Datas[0]" alt="" class="shop_icon" /> -->
            <div class="shop_name">{{ $store.state.temp && $store.state.temp.mailInfo && $store.state.temp.mailInfo.name }}</div>
          </div>
          <div class="bgBox" v-if="dataInfo.image">
            <img class="bg" :src="'data:image/png;base64,'+ dataInfo.image" alt="" style="object-fit: cover;" />
            <div class="anchorInfo">
              <img :src="base64Datas[0]" alt="" />
              <div class="nickname">{{ dataInfo.nickname }}</div>
            </div>
            <div class="live_status">
              {{ dataInfo.status == 0 ? "预告" : dataInfo.status == 1 ? "直播中" : "回放中" }}
            </div>
          </div>
          <div class="posterBottom">
            <div class="l_info">
              <div class="titless">{{ dataInfo.title }}</div>
              <div class="live_time">直播时间{{ dataInfo.start_at }}</div>
            </div>
            <div class="r_info">
              <img :src="base64Datas[2]" alt="" />
              <p>长按识别或者保存图片</p>
            </div>
          </div>
          <div class="share_meber">
            <img :src="base64Datas[1]" alt="" />
            <div class="m_nickname">{{ nameEllipsis }}</div>
          </div>
        </div>
      </div>
      <div style="width: 19.375rem; margin: 0 auto; border-radius: 8px; z-index: 2147483647;" v-show="!loadingImg">
        <img style="width: 19.375rem; border-radius: 8px; z-index: 2147483647; left: 0;" id="thecanvas" @touchstart.stop="previewImage" />
      </div>
      <div class="closeBox" @click.stop="showPoster = false">
        <i class="iconfont icon-close11"></i>
      </div>
    </div>

    <!-- 商品列表 弹窗 -->
    <van-popup v-model="showGoodLift" round position="bottom" :style="{ height: '50%' }" closeable class="set-pc-styleLeft">
      <div class="popupClass3">
        <li class="child" v-for="(item, index) in dataInfo.goods" :key="index" @click="gotoGoodDetail(item.id)">
          <div class="goodImg">
            <img :src="item.thumb" alt="" />
            <div class="tag">{{ item.sort }}</div>
          </div>
          <div class="goodRight">
            <div class="title">
              {{ item.title }}
            </div>
            <div class="bottomBox">
              <div class="price">
                <i class="smallPrice">{{ $i18n.t("money") }}</i
                >{{ item.min_price }}
              </div>
              <div class="cartIcon"><i class="iconfont icon-car_card"></i></div>
            </div>
          </div>
        </li>
        <div style="height: 3rem;"></div>
      </div>
      <div v-if="fun.isTextEmpty(dataInfo.goods)">
        <img :src="require('@/assets/images/blank.png')" alt="" style="width: 5rem; margin: 2rem 0 1rem;" />
        <p style="color: #666;">该直播间暂无商品 ~</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
import player_Controller from "./player_Controller";
export default player_Controller;
</script>
<style lang="scss" rel="stylesheet/scss">
#livePage {
  background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/livePK_bg.png");
  background-size: 100% 100%;

  video {
    object-fit: cover;
    z-index: 1 !important;
  }

  .horizontal-screen {
    video {
      height: auto !important;
      top: 50%;
      object-fit: contain;
      transform: translateY(-100%);
      position: absolute;
    }
  }
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
#livePage {
  font-size: 0.875rem;
  position: relative;
  height: 100vh;
  overflow: hidden;

  /* css主要部分的样式 */

  /* 定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸 */

  ::-webkit-scrollbar {
    width: 10px; /* 对垂直流动条有效 */
  }

  .videos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    video {
      z-index: 1 !important;
    }
  }

  .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    .coverImg {
      width: 100%;
      height: 100%;
      filter: blur(15px);
      -webkit-filter: blur(15px);
      object-fit: contain;
    }

    .play {
      position: absolute;
      z-index: 11;
      left: calc(55% - 3rem);
      top: calc(50% - 3rem);
      width: 4rem;
      height: 4rem;
    }

    .top {
      position: absolute;
      top: 0.25rem;
      left: 0.25rem;
      right: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .backBtn {
        margin-right: 0.25rem;
        width: 1.5rem;
        line-height: 1.5rem;
        height: 1.5rem;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 100%;

        i {
          font-size: 0.875rem;
          color: #fff;
        }
      }

      .anchorInfo {
        height: 2.25rem;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 1.125rem;
        overflow: hidden;
        display: flex;
        padding: 0 0.625rem 0 0.5rem;
        align-items: center;

        .Avatar {
          width: 1.5rem;
          height: 1.5rem;
          overflow: hidden;
          border-radius: 100%;
          border: 1px solid #fff;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .user {
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin: 0 0.25rem;

          p {
            text-align: left;
            max-width: 6rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .plugin_main {
      position: absolute;
      top: -12rem;
      right: 8px;
      margin-top: 1rem;
      // width: 5rem;
      height: 12rem;
      overflow-y: scroll;
      display: flex;
      flex-direction: column-reverse;
      z-index: 999;
      padding-right: 0.625rem;

      &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      .plugin_child {
        position: relative;
        margin-bottom: 0.875rem;
        display: flex;
        justify-content: center;

        a {
          display: block;
        }

        img {
          width: 2.5rem;
          height: 2.5rem;
          object-fit: cover;
          display: block;
          border-radius: 100%;
        }

        i {
          position: absolute;
          top: -0.875rem;
          right: -1rem;
          font-size: 1rem;
          color: #fff;
          padding: 0.25rem;
        }
      }
    }


    .comment {
      padding-left: 0.875rem;
      width: 17.375rem;
      height: 9.875rem;
      margin-bottom: 0.5rem;

      .chat_messages {
        overflow-y: scroll;
        height: 9.875rem;

        .chat_messages_child {
          line-height: 1.125rem;
          margin-bottom: 0.375rem;
          color: #fff;
          text-align: left;
          max-width: 100%;
          overflow: hidden;

          .chat_image {
            display: inline-block;
            width: 1.25rem;
            height: 1.25rem;
            border: solid 0.0625rem #fff;
            vertical-align: sub;
            border-radius: 100%;
            position: relative;
            margin-right: 0.25rem;

            img {
              display: inline-block;
              width: 100%;
              height: 100%;
              border-radius: 100%;
              overflow: hidden;
            }

            .message_tag {
              // width: 0.875rem;
              text-align: center;
              height: 0.75rem;
              line-height: 0.75rem;
              border-radius: 5px;
              overflow: hidden;
              position: absolute;
              bottom: -0.25rem;
              right: -0.75rem;
              color: #fff;
              font-size: 8px;
              padding: 0 0.125rem;
              background: #00f3d4;
            }
          }

          .message_icon {
            display: inline-block;
            background: #0ad76d;
            border-radius: 0.125rem;
            padding: 0 0.25rem;
            margin-right: 0.375rem;
          }

          .color_1,
          .color_2,
          .message_tag_1,
          .message_tag_2 {
            background: #ffc323 !important;
          }

          .color_3,
          .color_4,
          .message_tag_3,
          .message_tag_4 {
            background: #ff7f29 !important;
          }

          .color_5,
          .color_6,
          .message_tag_5,
          .message_tag_6 {
            background: #ff2c29 !important;
          }

          .color_7,
          .color_8,
          .message_tag_7,
          .message_tag_8 {
            background: #6700f3 !important;
          }

          .color_9,
          .color_10,
          .message_tag_9,
          .message_tag_10 {
            background: #f30061 !important;
          }

          .text {
            display: inline-block;
            padding: 0.25rem 0.375rem;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 0.188rem;
            color: #fff;

            .name {
              display: inline-block;
              padding-right: 0.375rem;
              color: #00f3d4;
            }
          }

          .textcolor_1,
          .textcolor_2 {
            color: #ffc323 !important;
          }

          .textcolor_3,
          .textcolor_4 {
            color: #ff7f29 !important;
          }

          .textcolor_5,
          .textcolor_6 {
            color: #ff2c29 !important;
          }

          .textcolor_7,
          .textcolor_8 {
            color: #6700f3 !important;
          }

          .textcolor_9,
          .textcolor_10 {
            color: #f30061 !important;
          }
        }
      }
    }

    .top_icon {
      display: flex;
      flex-direction: column-reverse;
      width: 2.25rem;
      margin-right: 0.875rem;
      z-index: 999;

      .top_icons {
        width: 2.25rem;
        height: 2.25rem;
        line-height: 2.25rem;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 100%;
        overflow: hidden;
        color: #fff;

        i {
          font-size: 1.5rem;
        }
      }
    }

    .positionStyles {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }

    .BarrageBox {
      width: 100%;
      height: 5.375rem;
      margin-bottom: 0.5rem;
    }

    .purchase_tips {
      padding-left: 0.875rem;
      display: flex;
      height: 1.375rem;
      margin-bottom: 0.5rem;

      .purchase_tips_content {
        transition: all 2s;

        .buyingBox {
          height: 1.375rem;
          line-height: 1.375rem;
          padding: 0 0.5rem;
          background-color: #d29800;
          border-radius: 0.688rem;
          color: #fff;
          display: flex;

          .buyName {
            display: inline-block;
            max-width: 8rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    .bottomBox {
      width: 100%;
      padding: 0 0.875rem;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      color: #fff;
      position: relative;
      .commentLeft {
        text-align: left;
        width: 12.25rem;
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 1rem;
        padding: 0 0.5rem;
        overflow: hidden;
        display: flex;
        color: #fff;
        border-bottom: 1px solid #fff;
        margin-left: 0.5rem;

        i {
          font-size: 1.25rem;
          margin-right: 0.25rem;
        }
      }

      .bottomRight {
        display: flex;
        position: relative;

        .canvasBox {
          position: absolute;
          bottom: 2.5rem;
          right: -0.875rem;
          width: 100px;
          height: 150px;
        }

        .btn_main {
          width: 2.5rem;
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-left: 0.925rem;
          position: relative;

          .Dot {
            position: absolute;
            background-color: #ff2c29;
            border: solid 1px #fff;
            width: 0.375rem;
            height: 0.375rem;
            top: 8px;
            right: 2px;
            border-radius: 100%;
          }
        }

        .top_icons {
          width: 2.5rem;
          height: 2.5rem;
          line-height: 2.5rem;
          background: rgba(0, 0, 0, 0.4);
          border-radius: 100%;
          position: relative;

          .num {
            position: absolute;
            top: 0.5rem;
            left: 1.5rem;
            background: #6100d4;
            border-radius: 0.875rem;
            height: 0.875rem;
            line-height: 0.875rem;
            padding: 0 0.25rem;
            font-size: 0.75rem;
          }

          p {
            font-size: 0.875rem;
          }

          .likenum {
            background: #e22400;
          }

          i {
            font-size: 1.5rem;
          }

          .icon-zb_goods {
            color: #fff;
          }

          .icon-zb_like {
            color: #ffbd27;
          }

          .zb_gift {
            width: 1.25rem;
            height: 1.156rem;
            object-fit: cover;
            vertical-align: sub;
          }
        }
      }

      .top_icons1 {
        width: 2.25rem;
        height: 2.5rem;
        line-height: 2.5rem;
        border-radius: 100%;
        position: relative;

        i {
          font-size: 2.5rem;
          color: #fc7d26;
        }

        .num {
          position: absolute;
          top: 0.25rem;
          left: 1.5rem;
          background: #6100d4;
          border-radius: 0.875rem;
          height: 0.875rem;
          line-height: 0.875rem;
          padding: 0 0.25rem;
          font-size: 0.75rem;
        }
      }
    }
  }

  .add_bgc {
    background: #000;
    overflow: hidden;
    z-index: 9999;
  }

  .stop_style {
    z-index: 999;
  }

  .stop_style .stop_showbox {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8rem;
    height: 8rem;
    margin: -4rem 0 0 -4rem;

    .stop_cover {
      width: 3.875rem;
      height: 3.875rem;
      border-radius: 100%;
      overflow: hidden;
    }

    .stop_text {
      font-size: 1rem;
      font-weight: bold;
      color: #ff7200;
      padding-top: 1rem;
    }
  }

  .van-popup {
    overflow-y: unset;
  }

  .popupClass3 {
    margin: 2rem 1rem 1rem 1rem;
    height: 100%;
    overflow: scroll;

    .child {
      height: 6.625rem;
      border-bottom: 0.0625rem solid #f3f3f4;
      display: flex;
      align-items: center;

      .goodImg {
        width: 4.875rem;
        height: 4.875rem;
        overflow: hidden;
        border-radius: 0.25rem;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .tag {
          position: absolute;
          height: 1rem;
          line-height: 1rem;
          top: 0;
          left: 0;
          background-color: #ff9c00;
          color: #fff;
          padding: 0 0.25rem;
          border-radius: 0.234rem 0 0.234rem 0;
        }
      }

      .goodRight {
        flex: 1;
        padding-left: 0.875rem;
        height: 4.875rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: 0.875rem;
          font-weight: bold;
          text-align: left;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-break: break-all;
          overflow: hidden;
        }

        .bottomBox {
          display: flex;
          justify-content: space-between;

          .price {
            text-align: left;
            color: #f21a1b;
            font-size: 1rem;

            .smallPrice {
              font-size: 0.75rem;
              color: #999;
            }
          }

          .cartIcon {
            width: 1.5rem;
            height: 1.5rem;
            line-height: 1.5rem;
            border-radius: 100%;
            overflow: hidden;
            background-color: #f21a1b;
            color: #fff;
          }
        }
      }
    }
  }

  .replyMainComment {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;

    .left {
      flex: 1;
      height: 2.5rem;
      background-color: #f5f5f5;
      border-radius: 0.5rem;

      input {
        border: none;
        height: 100%;
        width: 100%;
        padding-left: 0.625rem;
      }
    }

    .right {
      width: 4rem;
      height: 2.5rem;
      line-height: 2.5rem;
      background-color: #ee0223;
      border-radius: 1.25rem;
      color: #fff;
      margin-left: 0.5rem;
    }
  }

  .popupClass_newPoster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 19.375rem;
    z-index: 999;

    .popup-box {
      width: 19.375rem;
      margin: 0 auto;
      overflow: hidden;
      border: 1px solid #eee;
      border-radius: 8px;
    }

    .code {
      width: 19.375rem;
      background-color: #fff;
      border-radius: 8px;
      padding-top: 0.5rem;
      padding-bottom: 1rem;

      .shop_top {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1.75rem;
        margin-bottom: 0.5rem;

        .shop_icon {
          width: 1.75rem;
          height: 1.75rem;
          border-radius: 100%;
          margin: 0;
        }

        .shop_name {
          height: 1.75rem;
          line-height: 1.75rem;
          font-size: 0.875rem;
          color: #000;
        }
      }

      .bgBox {
        position: relative;
        margin: 0 auto;
        width: 17.5rem;
        background: #fbfbfb;

        .bg {
          width: 17.5rem;
          max-height: 18rem;
          display: block;
          object-fit: cover;
        }

        .anchorInfo {
          position: absolute;
          top: 0.6rem;
          left: 0.6rem;
          background: rgba(0, 0, 0, 0.4);
          color: #fff;
          height: 1.375rem;
          line-height: 1.375rem;
          border-radius: 0.875rem;
          padding-right: 0.375rem;
          display: flex;

          img {
            width: 1.375rem;
            height: 1.375rem;
            border-radius: 100%;
            margin-right: 0.25rem;
          }

          .nickname {
            max-width: 5rem;
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
            white-space: nowrap; /* 规定段落中的文本不进行换行 */
          }
        }

        .live_status {
          position: absolute;
          top: 0.6rem;
          right: 0.6rem;
          color: #fff;
          width: 4rem;
          height: 1.375rem;
          line-height: 1.375rem;
          background-color: #ff7200;
          border-radius: 0.656rem;
        }
      }

      .posterBottom {
        width: 17.5rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        text-align: left;

        .l_info {
          display: flex;
          flex-direction: column;

          .titless {
            width: 11rem;
            height: 2.5rem;
            line-height: 1.25rem;
            color: #000;
            font-size: 0.875rem;
            text-align: left;
            margin-top: 1.375rem;
            overflow: hidden;
            text-overflow: ellipsis;
            // display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          .live_time {
            font-size: 10px;
            color: #ff7200;
            margin-top: 1.875rem;
          }
        }

        .r_info {
          margin-top: 0.375rem;
          text-align: right;

          img {
            width: 5.969rem;
            height: 5.656rem;
            object-fit: contain;
          }

          p {
            font-size: 0.625rem;
          }
        }
      }

      .share_meber {
        color: #666;
        margin-top: 0.875rem;
        min-height: 1.5rem;
        line-height: 1.5rem;
        display: flex;
        padding: 0 0.875rem;
        text-align: left;

        img {
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 100%;
          margin: 0;
          vertical-align: top;
          margin-right: 0.25rem;
        }

        .m_nickname {
          overflow: hidden; /* 超出部分隐藏 */
        }
      }
    }

    .closeBox {
      width: 2rem;
      height: 2rem;
      line-height: 2rem;
      border: solid 0.125rem #fff;
      border-radius: 100%;
      color: #fff;
      position: absolute;
      left: 50%;
      bottom: -2.5rem;
      margin-left: -1rem;
      z-index: 999;

      i {
        font-size: 1rem;
      }
    }
  }

  .audio-wrapper {
    width: 18rem;
    height: 30px;
    margin: 0 auto;

    color: #3e3e3e;
    z-index: 999;
    position: relative;

    .icon {
      position: absolute;
      top: 0;
      left: -2.125rem;
      width: 1.2rem;
      height: 1.2rem;

      img {
        width: 1.2rem;
        height: 1.2rem;
        display: inline-block;
      }
    }
  }

  .audio-left {
    float: left;
    text-align: center;
    width: 18%;
    height: 100%;
  }

  .audio-left img {
    width: 40px;
    position: relative;
    top: 15px;
    margin: 0;
    display: initial; /* 解除与app的样式冲突 */
    cursor: pointer;
  }

  .slider {
    width: 100%;
    position: relative;
    height: 16px;

    /* margin-top: 20px; */
    display: flex;
    align-items: center;
    cursor: default;
    user-select: none;
    outline: none;
  }

  .slider-track {
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -1px;
    background-color: #bec2c1;
  }

  .slider-fill {
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: #ffba00;
    left: 0;
    top: 50%;
    margin-top: -1px;
  }

  .slider-thumb {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background-color: #ffba00;
    color: #ffba00;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

  .time {
    display: flex;
    color: #fff;
    font-size: 0.625rem;
  }

  .time_left {
    flex: 1;
    text-align: left;
  }

  .time_right {
    flex: 0 0 3rem;
  }

  .fullScreens {
    height: 100vh;
  }

  .topScreens {
    height: 50vh;
  }

  .bottomScreens {
    height: 50vh;
    top: auto;
    bottom: 0;
  }
}
</style>
